<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表单验证demo</title>
    <link rel="stylesheet" href="../../css/h5-from.css">
</head>
<body>
<div class="container">
    <div>
        <div>
        <pre>
(1)form的    novalidate 属性,使得表单的必填项失效;   autocomplete 属性,自动回填
(2)用户名      必填+自动获取焦点+任意5位的字符   (3)编号       长度在2~5
(4)自定义记忆框   关联一个下拉列表作为可选值      (5)记录           每次步长 0.01
(6)email    默认的邮箱验证                   (7)代码       自定义报错提示信息
        </pre>
        </div>
        <!--    <form action="" method="get" enctype="multipart/form-data"  autocomplete="on">-->
        <form action="" method="get" enctype="multipart/form-data" autocomplete="on">
            <table style="text-align: center;width: 100%">
                <tr>
                    <td class="right">用户名:</td>
                    <td class="left">
                        <input type="text" id="username" name="username" placeholder="请输入用户名" required autofocus
                               pattern="^\w{5}"/>
                    </td>
                    <td class="right">文件:</td>
                    <td class="left"><input type="file"></td>
                </tr>
                <tr>
                    <td class="right">编号:</td>
                    <td class="left">
                        <input type="text" name="test" value="" maxlength="5" minlength="2"/>
                    </td>
                    <td class="right">自定义记忆框:</td>
                    <td class="left">
                        <input type="text" list="tips">
                        <dataList id="tips">
                            <option value="celia"></option>
                            <option value="vivi"></option>
                            <option value="Jack"></option>
                            <option value="leon"></option>
                            <option value="deity"></option>
                            <option value="toto"></option>
                        </dataList>
                    </td>
                </tr>
                <tr>
                    <td class="right">记录:</td>
                    <td class="left">
                        <input type="number" value="10" step="0.01"/>
                    </td>
                    <td class="right">email:</td>
                    <td class="left">
                        <input type="email" value="dsfsdf@123.com"/>
                    </td>
                </tr>
                <tr>
                    <td class="right">代码:</td>
                    <td class="left">
                        <input type="text" required pattern="^\d{4}$" oninput="checkIt(this)" placeholder="请输入代码">
                    </td>
                    <td class="left" colspan="2">
                        <!-- <input type="submie" name="" formnovalidate> -->
                        <input type="submit" value="提交">
                    </td>
                </tr>
            </table>

        </form>
        <script type="text/javascript">
            console.log(document.getElementById("username") === username); // true h5语法
            console.log(username.validity);

            // console.log(username.validity.valueMissing);
            function checkIt(obj) {
                console.log(obj.validity);
                var it = obj.validity;
                if (true === it.valueMissing) {
                    obj.setCustomValidity("不能为空");
                } else {
                    if (true === it.patternMismatch) {
                        obj.setCustomValidity("必须是4个数字");
                    } else {
                        obj.setCustomValidity("");
                    }
                }
            }
        </script>
    </div>
    <hr/>
    <!-- 邮箱特殊样式部分 -->
    <div style="position: relative;margin: 10px" id="demo_mail">
        <input id="demo_mail_input" type="email" required placeholder="输入邮箱">
        <span class="title">邮箱</span>
        <label for="demo_mail_input"></label>
    </div>
    <hr/>
    <!-- 美化表单部分 -->
    <div id="three" style="text-align: center">
        <h2>美化表单 demo部分</h2>
        <form  method="post">
            <div class="oneList">
                <label for="three_user">手机号</label>
                <input name="UserName" id="three_user" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$"
                       required oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')">
            </div>
            <div class="oneList">
                <label for="pws">密码</label>
                <input name="pws" id="pws" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$"
                       required oninvalid="this.setCustomValidity('请输入正确密码');" oninput="setCustomValidity('')" onchange="checkPassword()">
            </div>
            <div class="oneList">
                <label for="r_pws">确认密码</label>
                <input name="r_pws" id="r_pws" type="password" placeholder="确认密码" class="" required onchange="checkPassword()">
            </div>
            <div class="oneList">
                <label for="three_select">了解方式</label>
                <select id="three_select" name="know" required>
                    <option value="">==请选择==</option>
                    <option value="1">搜索引擎</option>
                    <option value="2">朋友圈</option>
                    <option value="3">朋友推广</option>
                    <option value="4">广告投放</option>
                </select>
            </div>
            <div class="oneList">
                <input type="submit" value="提交">
            </div>
        </form>
        <script type="text/javascript">
            function checkPassword() {
                let pws = document.getElementById("pws");
                let r_pws = document.getElementById("r_pws");
                if (pws.value !== r_pws.value)  r_pws.setCustomValidity("两次输入的密码不匹配");
                else r_pws.setCustomValidity("");
            }
        </script>
    </div>
    <hr/>
    <!-- 表单验证默认样式修改 -->
    <div id="four" style="text-align: center">
        <h1>表单验证默认样式修改</h1>
        <form id="four_form">
            <div class="oneLine">
                <label for="four_name">用户名:</label>
                <input id="four_name" name="name" class="four_input" required placeholder="用户名非空,没有其它限制">
            </div>
            <div class="oneLine">
                <label for="four_email">Email:</label>
                <input id="four_email" name="email" class="four_input" type="email" required placeholder="email非空+h5默认要求">
            </div>
            <div class="oneLine">
                <input type="submit" value="提交" id="four_submit">
            </div>
        </form>
        <script>
            replaceValidationUI( document.getElementById("four_form") );
            function replaceValidationUI(form) {
                // invalid --> 表单验证不通过事件
                form.addEventListener("invalid", function(event) {event.preventDefault();}, true); //true在捕获阶段执行(大到小)  false在冒泡阶段执行(小到大)
                form.addEventListener("submit", function(event) { if (!this.checkValidity()) event.preventDefault(); }, true);
                document.getElementById("four_submit")
                    .addEventListener("click",
                    function(event) {
                        let inValidityField = form.querySelectorAll(":invalid"),
                            errorMessage = form.querySelectorAll(".error-message"),
                            parent;

                        for (let i = 0; i < errorMessage.length; i++) errorMessage[i].parentNode.removeChild(errorMessage[i]);

                        /*
                        insertAdjacentHTML(position,text)方法是将文本解析为element元素,并将结果节点插入到DOM树中的指定位置。
                        它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素;这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快
                        position: 可选值
                                beforebegin'：元素element自己的前面
                                afterbegin'：插入到元素element里面的第一个子节点之前
                                beforeend'：插入元素element里面的最后一个子节点之后
                                afterend'：元素element自己的后面
                         */
                        for (let i = 0; i < inValidityField.length; i++) {
                            parent = inValidityField[i].parentNode;
                            parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>")
                        }
                        if (inValidityField.length > 0)  inValidityField[0].focus();
                    }
                )
            }

        </script>
    </div>
    <hr/>
    <!-- 美化表单demo2 纯css实现-->
    <div id="five">
        <h1>美化表单demo2 纯css实现</h1>
        <form>
            <input type="name" required><label>名称</label>
            <input type="email" required><label>邮箱</label>
            <input type="tel"><label>手机</label>
            <input type="url"><label>网址</label>
            <select name="" id="">
                <option value="">非必选项一</option>
                <option value="">非必选项二</option>
                <option value="">非必选项三</option>
                <option value="">非必选项四</option>
            </select>
            <textarea name="#" cols="30" rows="10" placeholder="留言（必填）" required></textarea>
            <input type="submit" value="提交表单">
        </form>
    </div>
</div>

</body>
</html>